import React, { ChangeEvent, useEffect, useState } from 'react';
import { getComments ,serchComments} from '@/services/index';
import { Form, Input, Button, Select, Table, Popconfirm, message, Modal } from 'antd';

import './comments.less';
interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
}
// 头部
const { Option } = Select;
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};



const Comments: React.FC = () => {
    let [list, setlist] = useState([]);
    const [form] = Form.useForm();
    const [visible, setVisible] = useState(false);
    let [cid,setCid] = useState(0);
    let [flag,setFlag] = useState(false);

    // 表格
    const columns = [
        {
            title: '状态',
            width: 100,
            key: 'pass',
            fixed: 'left',
            render: () => 'pass' == true ? <a>通过</a> : <a>未通过</a>,
        },
        { title: '称呼', dataIndex: 'name', key: '1' },
        { title: '联系方式', dataIndex: 'email', key: '2' },
        { title: '原始内容', dataIndex: 'content', key: '3' },
        { title: 'HTML内容', dataIndex: 'html', key: '4' },
        { title: '管理文章', dataIndex: 'url', key: '5' },
        { title: '创建时间', dataIndex: 'createAt', key: '6' },
        { title: '父级评论', dataIndex: 'replyUserName', key: '7', render: (str: 'replyUserName') => str ? str : <a>无</a>, },
        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 200,
            render: () => {
                return <div style={{ display: 'flex', justifyContent: "space-around", alignItems: 'center' }}>
                    <a onClick={()=>message.warning('访客无权进行该操作')}>通过</a>
                    <a onClick={()=>message.warning('访客无权进行该操作')}>拒绝</a>
                    <a onClick={() => setVisible(true)}>回复</a>
                    <Popconfirm
                        title="确认删除这个评论?"
                        okText="确认"
                        onConfirm={confirm}
                        cancelText="取消"
                    >
                        <a href="#">删除</a>
                    </Popconfirm>
                </div>
            },
        },
    ];
    // 错误提示
    function confirm() {
        message.warning('访客无权进行该操作');
    }

    // 搜索
    const onFinish = (values: any) => {
        console.log(values);
        serchComments({page: 1,pageSize: 12,...values}).then(res=>{
            console.log('搜索......',res.data[0])
            setlist(res.data[0]);
        })
    };
    // 重置
    const onReset = () => {
        form.resetFields();
    };


    // 请求数据
    useEffect(() => {
        getComments().then(res => {
            // console.log('res...', res.data[0])
            setlist(res.data[0]);
        })
    }, [])

    // 全选，反选
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            setFlag(!flag);
        },
        getCheckboxProps: (record: DataType) => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
        }),
    };


    return <div className='comments'>
        <div className="comments_head">
            <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
                <Form.Item name="name" label="称呼" style={{ width: '300px' }}>
                    <Input placeholder="请输入称呼" />
                </Form.Item>
                <Form.Item name="email" label="Email" style={{ width: '300px' }}>
                    <Input placeholder="请输入联系方式" />
                </Form.Item>
                <Form.Item name="pass" label="状态" style={{ width: '300px', textAlign: "center" }}>
                    <Select placeholder="请选择" allowClear>
                        <Option value="female">已通过</Option>
                        <Option value="other">未通过</Option>
                    </Select>
                </Form.Item>
                <Form.Item style={{ width: '300px' }} />
                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">
                        搜索
                    </Button>
                    <Button htmlType="button" onClick={onReset}>
                        重置
                    </Button>
                </Form.Item>
            </Form>
        </div>
        <div className="comments_main" style={{ width: '1270px', overflow: 'auto', marginBottom: '20px', margin: '0 auto' ,backgroundColor:'white'}}>
            {
                flag===true ?
                <div className="main_head">
                    <span className={cid==1 ?'spans':''} onClick={()=>{setCid(1);message.warning('访客无权进行该操作')}}>通过</span>
                    <span className={cid==2 ?'spans':''} onClick={()=>{setCid(2);message.warning('访客无权进行该操作')}}>拒绝</span>
                    <span onClick={()=>message.warning('访客无权进行该操作')}>删除</span>
                </div> : null
            }
            
            <Table rowSelection={{ ...rowSelection }} columns={columns as any} dataSource={list} scroll={{ x: 1500 }} />
        </div>
        <Modal
            title="回复评论"
            centered
            visible={visible}
            onOk={() => { setVisible(false); message.warning('访客无权进行该操作') }}
            onCancel={() => setVisible(false)}
            width={520}
        >
            <input type="text" style={{ width: '427px', height: '142px', marginLeft: '30px', borderColor: 'gray' }} />
        </Modal>
    </div>
}

export default Comments;